import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { User, UserSettings } from '@/interfaces/user';
import ThemeToggle from '@/components/common/ThemeToggle';
import ProfileEditor from '@/components/common/ProfileEditor';
import DataManager from '@/components/common/DataManager';
import BackButton from '@/components/common/BackButton';

const Settings: React.FC = () => {
  const navigate = useNavigate();
  
  const [user, setUser] = useState<User>({
    id: '1',
    name: 'John Doe',
    email: 'john.doe@example.com',
    avatar: '',
    bio: 'A passionate writer and developer',
    website: 'https://johndoe.dev',
    joinDate: '2024-01-01'
  });

  const [settings, setSettings] = useState<UserSettings>({
    theme: 'system',
    language: 'en',
    emailNotifications: true,
    autoSave: true
  });

  const [activeTab, setActiveTab] = useState<'profile' | 'preferences' | 'data'>('profile');

  const handleUserUpdate = (updatedUser: User) => {
    setUser(updatedUser);
    // TODO: Save to backend
  };

  const handleSettingsUpdate = (updatedSettings: UserSettings) => {
    setSettings(updatedSettings);
    // TODO: Save to backend
  };

  const tabs = [
    { id: 'profile', label: 'Profile', icon: '👤' },
    { id: 'preferences', label: 'Preferences', icon: '⚙️' },
    { id: 'data', label: 'Data', icon: '💾' }
  ] as const;

  return (
    <div className="min-h-screen bg-white dark:bg-ios-gray-900">
      {/* Header */}
      <header className="sticky top-0 z-50 bg-white/80 dark:bg-ios-gray-900/80 backdrop-blur-apple border-b border-ios-gray-200 dark:border-ios-gray-700">
        <div className="max-w-4xl mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-4">
              <BackButton onClick={() => navigate('/')} />
              <h1 className="text-2xl font-bold text-ios-gray-900 dark:text-white">
                Settings
              </h1>
            </div>
            
            <ThemeToggle 
              currentTheme={settings.theme}
              onThemeChange={(theme) => handleSettingsUpdate({ ...settings, theme })}
            />
          </div>
        </div>
      </header>

      <div className="max-w-4xl mx-auto px-4 py-8">
        {/* Tab Navigation */}
        <div className="flex space-x-1 bg-ios-gray-100 dark:bg-ios-gray-800 rounded-apple-lg p-1 mb-8">
          {tabs.map((tab) => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`flex-1 flex items-center justify-center space-x-2 py-3 px-4 rounded-apple-md font-medium transition-all duration-200 ${
                activeTab === tab.id
                  ? 'bg-white dark:bg-ios-gray-700 text-ios-blue shadow-apple'
                  : 'text-ios-gray-600 dark:text-ios-gray-400 hover:text-ios-blue'
              }`}
            >
              <span>{tab.icon}</span>
              <span>{tab.label}</span>
            </button>
          ))}
        </div>

        {/* Tab Content */}
        <div className="bg-white dark:bg-ios-gray-800 rounded-apple-xl shadow-apple p-6">
          {activeTab === 'profile' && (
            <ProfileEditor 
              user={user} 
              onSave={handleUserUpdate}
            />
          )}
          
          {activeTab === 'preferences' && (
            <div className="space-y-6">
              <div>
                <h2 className="text-xl font-semibold text-ios-gray-900 dark:text-white mb-4">
                  Preferences
                </h2>
                
                {/* Theme Setting */}
                <div className="space-y-4">
                  <div className="flex items-center justify-between py-3 border-b border-ios-gray-200 dark:border-ios-gray-700">
                    <div>
                      <h3 className="font-medium text-ios-gray-900 dark:text-white">
                        Appearance
                      </h3>
                      <p className="text-sm text-ios-gray-500 dark:text-ios-gray-400">
                        Choose your preferred theme
                      </p>
                    </div>
                    <ThemeToggle 
                      currentTheme={settings.theme}
                      onThemeChange={(theme) => handleSettingsUpdate({ ...settings, theme })}
                    />
                  </div>

                  {/* Language Setting */}
                  <div className="flex items-center justify-between py-3 border-b border-ios-gray-200 dark:border-ios-gray-700">
                    <div>
                      <h3 className="font-medium text-ios-gray-900 dark:text-white">
                        Language
                      </h3>
                      <p className="text-sm text-ios-gray-500 dark:text-ios-gray-400">
                        Select your preferred language
                      </p>
                    </div>
                    <select
                      value={settings.language}
                      onChange={(e) => handleSettingsUpdate({ ...settings, language: e.target.value })}
                      className="px-3 py-1 bg-ios-gray-50 dark:bg-ios-gray-700 border border-ios-gray-200 dark:border-ios-gray-600 rounded-apple-md text-ios-gray-900 dark:text-white focus:ring-2 focus:ring-ios-blue focus:border-transparent"
                    >
                      <option value="en">English</option>
                      <option value="zh">中文</option>
                      <option value="es">Español</option>
                      <option value="fr">Français</option>
                    </select>
                  </div>

                  {/* Email Notifications */}
                  <div className="flex items-center justify-between py-3 border-b border-ios-gray-200 dark:border-ios-gray-700">
                    <div>
                      <h3 className="font-medium text-ios-gray-900 dark:text-white">
                        Email Notifications
                      </h3>
                      <p className="text-sm text-ios-gray-500 dark:text-ios-gray-400">
                        Receive email updates about new articles
                      </p>
                    </div>
                    <label className="relative inline-flex items-center cursor-pointer">
                      <input
                        type="checkbox"
                        checked={settings.emailNotifications}
                        onChange={(e) => handleSettingsUpdate({ ...settings, emailNotifications: e.target.checked })}
                        className="sr-only peer"
                      />
                      <div className="w-11 h-6 bg-ios-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-ios-blue/20 dark:peer-focus:ring-ios-blue/40 rounded-full peer dark:bg-ios-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-ios-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-ios-gray-600 peer-checked:bg-ios-blue"></div>
                    </label>
                  </div>

                  {/* Auto Save */}
                  <div className="flex items-center justify-between py-3">
                    <div>
                      <h3 className="font-medium text-ios-gray-900 dark:text-white">
                        Auto Save
                      </h3>
                      <p className="text-sm text-ios-gray-500 dark:text-ios-gray-400">
                        Automatically save drafts while writing
                      </p>
                    </div>
                    <label className="relative inline-flex items-center cursor-pointer">
                      <input
                        type="checkbox"
                        checked={settings.autoSave}
                        onChange={(e) => handleSettingsUpdate({ ...settings, autoSave: e.target.checked })}
                        className="sr-only peer"
                      />
                      <div className="w-11 h-6 bg-ios-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-ios-blue/20 dark:peer-focus:ring-ios-blue/40 rounded-full peer dark:bg-ios-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-ios-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-ios-gray-600 peer-checked:bg-ios-blue"></div>
                    </label>
                  </div>
                </div>
              </div>
            </div>
          )}
          
          {activeTab === 'data' && (
            <DataManager />
          )}
        </div>
      </div>
    </div>
  );
};

export default Settings;